<template>
  <n-space
    vertical
    size="large"
    style="margin: 0px; height: 100%; width: 100%"
    content-style="padding: 0px; margin: 0px"
  >
    <n-layout
      :style="{ height: `${innerHeight}px`, padding: '0px', margin: '0px' }"
      content-style="padding: 0px; margin:0px;"
    >
      <n-layout-content content-style="padding: 0px;margin: 0px;">
        <n-form
          ref="formRef"
          :model="model"
          :rules="rules"
          style="margin: 40px 40px 40px 40px"
          size="large"
        >
          <n-form-item label="包名" path="packageName">
            <n-input
              placeholder="例如：com.jooki"
              v-model:value="model.packageName"
            />
          </n-form-item>
          <n-form-item label="作者" path="author">
            <n-input
              placeholder="例如：gmlihui580@gmail.com"
              v-model:value="model.author"
            />
          </n-form-item>
          <n-form-item label="版本号" path="version">
            <n-input placeholder="例如：1.0v" v-model:value="model.version" />
          </n-form-item>
          <n-form-item label="前缀" path="prefix">
            <n-input placeholder="例如：tb_" v-model:value="model.prefix" />
          </n-form-item>
          <n-form-item label="后缀" path="suffix">
            <n-input placeholder="例如：ex" v-model:value="model.suffix" />
          </n-form-item>
          <n-form-item label="CopyRight" path="copyright">
            <n-input
              type="textarea"
              placeholder=""
              v-model:value="model.copyright"
              :autosize="{
                minRows: 3,
                maxRows: 8,
              }"
            />
          </n-form-item>
          <n-form-item>
            <div style="position: absolute; right: 0px">
              <n-button
                style="margin-right: 40px; width: 120px"
                type="success"
                @click="onResetClicked"
                >重置</n-button
              >
            </div>
          </n-form-item>
        </n-form>
      </n-layout-content>
    </n-layout>
  </n-space>
</template>

<script>
import { defineComponent, onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import useWindowSize from "../composables/useWindowSize";
import IPC from "../background/ipc";

const defaultGlobal = {
  packageName: "com.jooki",
  author: "lihui580@gmail.com",
  version: "1.0v",
  prefix: "tb_",
  suffix: "",
  copyright:
    "/**\n * Copyright 2020 简创网 https://www.jianchuang.com\n * <p>\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n * <p>\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n * GNU General Public License for more details.\n * <p>\n * You should have received a copy of the GNU General Public License\n * along with this program.  If not, see http://www.gnu.org/licenses\n */",
};

export default defineComponent({
  setup() {
    const formRef = ref(null);

    const router = useRouter();

    const model = ref(defaultGlobal);

    const type = ref(router.currentRoute.value.query.type);

    const linkId = ref(router.currentRoute.value.query.linkId);

    const { innerHeight } = useWindowSize();

    const onResetClicked = async () => {
      await IPC.invoke("global.reset", {});
      let result = await IPC.invoke("global.get", {});
      model.value = result.data;
    };

    watch(
      model,
      async () => {
        await IPC.invoke("global.set", { globalInfo: model.value });
      },
      { deep: true }
    );

    onMounted(async () => {
      let result = await IPC.invoke("global.get", {});
      model.value = result.data;
    });

    return {
      formRef,
      type,
      linkId,
      innerHeight,
      model,
      onResetClicked,
    };
  },
});
</script>
